<template>
 <div>
     <v-card-text class="pa-0">
       <v-data-table :headers="headers" :items="desserts" :rows-per-page-items="[10,20,50,{ text:'全部',value:-1}]" :pagination.sync="pagination" :total-items="totalDesserts" :loading="loading" class="elevation-1">
                <template slot="items" slot-scope="props">
                  <td>

                  </td>
                  <td>{{ props.item.orderNumber }}</td>
                  <td>{{ props.item.createAt }}</td>

                  <td>{{ props.item.customerName }}</td>
                  <td>{{ props.item.memberShipCardNumber }}</td>
                  <td>{{ props.item.orderNumber }}</td>
                  <td>{{ props.item.orderNumber }}</td>

                  <td>
                    <v-btn depressed outline icon fab dark color="primary" small>
                      <v-icon>edit</v-icon>
                    </v-btn>
                    <v-btn depressed outline icon fab dark color="pink" small>
                      <v-icon>delete</v-icon>
                    </v-btn>
                  </td>
                </template>
              </v-data-table>
    </v-card-text>
 </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ["tableData"],
   data() {
    return {
      search: "",
      totalDesserts: 0,
      desserts: [],
      loading: true,
      pagination: {},
      headers: [
        {
          text: "序号",
          value: "seq",
          sortable: false
        },
        {
          text: "订单编号",
          value: "name"
        },
        {
          text: "时间",
          value: "时间"
        },
        {
          text: "消费者",
          value: "消费者"
        },
        {
          text: "金额",
          value: "会员卡"
        },
        {
          text: "卡扣减/余额",
          value: ""
        },
        {
          text: "实收",
          value: ""
        },
        {
          text: "操作",
          value: ""
        }
      ],
      pagination: {},
      loading: true,
      currentPage: 1,
      size: 15,
      polar: {},
      startDate: null,
      endDate: null,
      endDateMenu: false,
      startDateMenu: false
    };
  },
  components: {},
  mounted () {
    
  },
  watch: {
    pagination: {
      handler() {
        this.getDataFromApi().then(data => {
          console.log(data);
          this.desserts = data.items;
          this.totalDesserts = data.total;
        });
      },
      deep: true
    }
  },
  methods: {
    getDataFromApi() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        const { sortBy, descending, page, rowsPerPage } = this.pagination;
        let items = [];
        let total = 0;
        this.getOrders().then(res => { 
          items = res.content;
          console.log(res);
          total = res.totalElements;
          this.loading = false;
          resolve({
            items,
            total
          })
        });
      });
    },
    getOrders() {
      return new Promise((resolve, reject) => {
        this.$ajax
          .get("/api/app/api/collection/voucher/store/all", {
            params: {
              storeId: 908,
              storeType: 1,
              pageNumber: this.pagination.page,
              size: this.pagination.rowsPerPage
            }
          }) 
          .then(res => {
            resolve(res.data);
          })
          .catch(error => {
            console.log(error);
          });
      });
    }
  }
};
</script>

<style>
</style>
